@import "mixin";

.themeMixin({
  :host {
    .sidebar-logo {
      background: @primary-1;
      h1 {
        color: @text-color;
      }
    }

    .app-header {
      background: @layout-header-background;
    }

    .header-trigger {
      color: @text-color;
    }

    .inner-content {
      background: @layout-trigger-background;
    }

    .trigger:hover {
      color: #1890ff;
    }
  }
});

:host {
  display: flex;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  .app-layout {
    height: 100vh;

    .menu-sidebar {
      position: relative;
      z-index: 10;
      min-height: 100vh;
      box-shadow: 2px 0 6px rgba(0,21,41,.35);

      ::ng-deep .ant-menu-inline {
        border-right: none;
      }
    }

    .sidebar-logo {
      position: relative;
      height: 64px;
      padding-left: 24px;
      overflow: hidden;
      line-height: 64px;
      transition: all .3s;
    }

    .sidebar-logo img {
      display: inline-block;
      height: 32px;
      width: 32px;
      vertical-align: middle;
    }

    .sidebar-logo h1 {
      display: inline-block;
      margin: 0 0 0 20px;
      font-weight: 600;
      font-size: 14px;
      font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
      vertical-align: middle;
    }
  }

  nz-header {
    padding: 0;
    width: 100%;
    z-index: 2;

    .app-header {
      position: relative;
      height: 64px;
      padding: 0;
      box-shadow: 0 1px 4px rgba(0,21,41,.08);

      .header-trigger {
        height: 64px;
        padding: 20px 24px;
        font-size: 20px;
        cursor: pointer;
        transition: all .3s,padding 0s;
      }
    }
  }

  nz-content {
    margin: 24px;

    .inner-content {
      padding: 24px;
      height: 100%;
    }
  }
}
